<nav class="nav-bar" [ngClass]="{'collapsed': !openMenu}">
  <div class="menu bar">
    <div title="{{openMenu?'折叠':'展开'}}" class="menu-item" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()">
      <a class="menu-link link">
        <i class="material-icons">dehaze</i>
      </a>
    </div>        <!--默认显示的导航项  -->
    <div class="default" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()">
      <ul class="menu-default scrollbar">
        <li class="menu-item"
            *ngFor="let shortcut of shortcuts"
            [ngClass]="{'__selected': selectedShortcut === shortcut}"
            (click)="onShortcutSelectedChange(shortcut)"
            (mouseenter)="enterMenu($event,shortcut)"
            (mouseleave)="leaveMenu()">
          <a class="menu-link" [style.padding-left.px]="openMenu ? 25: 20">
            <span class="menuItem-ico  material-icons">{{shortcut.menuIcon}}</span>
            <span class="menuItem-name" *ngIf="openMenu">{{shortcut.menuName}}</span> </a>
        </li>
      </ul>
    </div>        <!--分割线  -->
    <div class="division" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()"></div>
    <!--自定义的导航项  -->
    <div class="custom" (mouseenter)="onOpenMenu()" (mouseleave)="onCloseMenu()">
      <ul class="menu-custom scrollbar">
        <li class="menu-item" pDraggable="dFavorite" pDroppable="dFavorite" *ngFor="let favorite of favorites"
            [ngClass]="{'__selected': selectedFavorite === favorite}" (mouseenter)="enterMenu($event,favorite)"
            (mouseleave)="leaveMenu()" (click)="onFavoriteSelectedChange(favorite)" (onDrop)="onDrop($event,favorite)"
            (onDragStart)="onDragStart($event,favorite)" (onDragEnd)="onDragEnd($event)">
          <a class="menu-link" [style.padding-left.px]="openMenu? 25 : 20">
            <span class="menuItem-ico material-icons">{{favorite.menuIcon}}</span>
            <span class="menuItem-name" *ngIf="openMenu">{{favorite.menuName}}</span>
          </a>
        </li>
      </ul>
    </div>        <!--箭头  -->
    <div class="arrow" (click)="onOpenAllMenu()"><span></span></div>
    <div class="prompt" *ngIf="showPrompt" [ngStyle]="{'top.px':top}">
      <div class="title"> {{title}}</div>
      <span></span>
      <div class="clear"></div>
    </div>
  </div>    <!-- 弹出层 -->
  <div class="dropdown" [ngClass]="{'__opened': openAllMenu}" [ngStyle]="{'left.px':openMenu ? 80:-26}">
    <a class="dropdown-close" (click)="onOpenAllMenu()">×</a>
    <div class="dropdown-head">            <!--搜索框  -->
      <div class="form-group" [formGroup]="menuSearchForm">
        <div class="form-input __search">
          <input placeholder="请输入关键字" formControlName="menuName" name="menuName" tabindex="1">
          <button class="btn __other">
            <i class="material-icons">search</i>
          </button>
        </div>
      </div>
    </div>        <!--弹出层内容  -->
    <div class="dropdown-content" *ngIf="!isSearching">
      <div class="list __items" *ngFor="let menu of accesies">
        <div class="list-group" [ngClass]="{'__opened': menu.isShow}" (click)="onOpenCurrentMenuItem(menu)">
          {{menu.menuName}}
        </div>
        <ul class="__sub" *ngIf="menu.isShow">
          <li title="{{menuItem.menuName}}"
              class="list-item" *ngFor="let menuItem of menu.children"
              (click)="onAccessSelectedChange(menuItem)">
            <app-star [menu]="menuItem" (checked)="onFavoriteChecked($event)"></app-star>
            <!--图标  -->
            <a class="list-link">
              <i class="material-icons">{{menuItem.menuIcon}}</i>
              <span class="list-name">{{menuItem.menuName}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="dropdown-content" *ngIf="isSearching">
      <div class="list __items">
        <ul class="__sub">
          <li title="{{menuItem.menuName}}" class="list-item" *ngFor="let menuItem of filerMenus"
              (click)="onAccessSelectedChange(menuItem)">
            <app-star [menu]="menuItem" (checked)="onFavoriteChecked($event)"></app-star>
            <!--图标  -->
            <a class="list-link">
              <i class="material-icons">{{menuItem.menuIcon}}</i>
              <span class="list-name">{{menuItem.menuName}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
